<template>
  <div>
    <a-card :bordered="false" :bodyStyle="tstyle">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <!--            <a-col :md="4" :sm="24">-->
            <!--              <a-form-item label="开课学年">-->
            <!--                <a-select show-search allowClear placeholder="请选择开课学年" v-model="queryParam.schoolYearId"-->
            <!--                          @select="changeSchoolInfo">-->
            <!--                  <a-select-option v-for="item of this.schoolYearList" :key="item.id">-->
            <!--                    {{ item.name }}-->
            <!--                  </a-select-option>-->
            <!--                </a-select>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <!--            <a-col :md="4" :sm="24">-->
            <!--              <a-form-item label="开课学期">-->
            <!--                <a-select show-search allowClear placeholder="请选择开课学期" v-model="queryParam.schoolTermId"-->
            <!--                          @select="changeSchoolInfo">-->
            <!--                  <a-select-option v-for="item of this.schoolTermList" :key="item.id">-->
            <!--                    {{ item.name }}-->
            <!--                  </a-select-option>-->
            <!--                </a-select>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <!--            <a-col :md="6" :sm="24">-->
            <!--              <a-form-item label="开课课程">-->
            <!--                <a-select-->
            <!--                  show-search-->
            <!--                  allowClear-->
            <!--                  placeholder="请选择开课课程"-->
            <!--                  v-model="queryParam.coursePublishId"-->
            <!--                >-->
            <!--                  <a-select-option v-for="item of this.courseList" :key="item.id">-->
            <!--                    {{ item.courseName }}-->
            <!--                  </a-select-option>-->
            <!--                </a-select>-->
            <!--              </a-form-item>-->
            <!--            </a-col>-->
            <!--            <a-col :md="4" :sm="24">-->
            <!--              <span class="table-page-search-submitButtons">-->
            <!--                <a-button type="primary" :disabled="!queryParam.coursePublishId" @click="getCorusePublish">查询</a-button>-->
            <!--              </span>-->
            <!--            </a-col>-->

            <a-col :md="4" :sm="24">
              <a-form-item label="开课学年">
                {{record.schoolYearName}}
              </a-form-item>
            </a-col>

            <a-col :md="4" :sm="24">
              <a-form-item label="开课学期">
                {{record.termName}}
              </a-form-item>
            </a-col>

            <a-col :md="4" :sm="24">
              <a-form-item label="开课课程">
                {{record.courseName}}
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-button type="primary" :disabled="!queryParam.coursePublishId" @click="showDetail">学生选课详情</a-button>
              <a-button type="primary" :disabled="!queryParam.coursePublishId" @click="exportCs">导出课表</a-button>
              <a-button type="primary" :disabled="!queryParam.coursePublishId" @click="helpStuCs">帮学生选课</a-button>
              <a-popconfirm
                title="确定进行选课确认吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="toConfirm()"
              >
                <a-button type="primary" v-if="corusePublishData.publishState===1 &&corusePublishData.confirmState===3"
                          :disabled="!queryParam.coursePublishId">提交选课确认
                </a-button>
              </a-popconfirm>
              <a-popconfirm
                title="确定取消选课确认吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="cancelConfirm()"
              >
                <a-button type="danger" v-if="corusePublishData.publishState===1 &&corusePublishData.confirmState===4"
                          :disabled="!queryParam.coursePublishId">取消选课确认
                </a-button>
              </a-popconfirm>
            </a-col>
          </a-row>

          <a-row :gutter="48">
            <a-col :md="8" :sm="8">
              <a-form-item label="开课状态">
                <a-tag color="green" v-if="corusePublishData.publishState===1">已发布</a-tag>
                <a-tag color="red" v-if="corusePublishData.publishState===0">待发布</a-tag>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="选课时间">
                {{corusePublishData.selectionStartDate}} ~ {{corusePublishData.selectionEndDate}}
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="选课状态">
                <a-tag color="red" v-if="corusePublishData.publishState===1 && corusePublishData.confirmState===0">
                  无
                </a-tag>
                <a-tag color="blue" v-if="corusePublishData.publishState===1 && corusePublishData.confirmState===1">
                  未开始
                </a-tag>
                <a-tag color="green" v-if="corusePublishData.publishState===1 && corusePublishData.confirmState===2">
                  选课中
                </a-tag>
                <a-tag color="cyan" v-if="corusePublishData.publishState===1 && corusePublishData.confirmState===3">
                  选课确认中
                </a-tag>
                <a-tag color="orange" v-if="corusePublishData.publishState===1 && corusePublishData.confirmState===4">
                  已确认
                </a-tag>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <x-down ref="batchExport" style="display: none"/>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false">
      <a-table
        bordered
        ref="table"
        :columns="columns"
        :dataSource="loadData"
        :loading="tableLoading"
        :pagination="false"
        :rowKey="(record) => record.id"
      >
        <span slot="frequencyDay" slot-scope="text, record">
          <a-tag color="orange">{{'星期'+text}}</a-tag>
        </span>

        <span v-for="(item,index) in cryData.coursePublishFrequencyList"
              :slot="['frequencyIndex-',item.frequencyIndex].join('')" slot-scope="text, record">
          <template v-if="text">
            <a-tag color='red' v-if="text.fullFlag"
                   @click="showStuList(text.courseScheduleId,text.frequencyIndex,record.frequencyDay)">
              已选{{text.courseSelectionNum}}人
            </a-tag>
            <a-tag color='green' v-if="!text.fullFlag"
                   @click="showStuList(text.courseScheduleId,text.frequencyIndex,record.frequencyDay)">
              已选{{text.courseSelectionNum}}人
            </a-tag>
          </template>
        </span>
      </a-table>
      <cs-detail ref="detail" @ok="handleDetailOk"/>
      <cs-stu-list ref="sutList" @ok="handleDetailOk"/>
      <cp-stu-list ref="sutCpList" @ok="handleDetailOk"/>
    </a-card>
  </div>
</template>

<script>
  import { sysSchoolYearList } from '@/api/modular/system/sysSchoolYearManage'
  import { sysSchoolTermList } from '@/api/modular/system/sysSchoolTermManage'
  import {
    coursePublishCancelConfirm,
    coursePublishConfirm,
    coursePublishDetail,
    coursePublishList
  } from '@/api/modular/main/coursePublishManage'
  import { exportSelection, getCourseSelectionCryInfo } from '@/api/modular/system/courseSelectionManage'
  import CsDetail from './csDetail'
  import CsStuList from './csStuList'
  import { XDown } from '@/components'
  import CpStuList from './cpStuList'

  export default {
    components: {
      CsDetail,
      CsStuList,
      CpStuList,
      XDown
    },
    data() {
      return {
        tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
        // 查询参数
        queryParam: {
          schoolYearId: '',
          schoolTermId: '',
          coursePublishId: ''
        },
        courseList: [],
        schoolYearList: [],
        schoolTermList: [],
        corusePublishData: '',
        cryColumns: [
          {
            title: '实验模块',
            dataIndex: 'moduleName',
            customRender(_, row) {
              return {
                children: row.moduleName,
                attrs: {
                  rowSpan: row.rowSpan
                }
              }
            }
          },
          {
            title: '模块选课要求',
            dataIndex: 'moduleDesc',
            customRender(_, row) {
              return {
                children: row.moduleDesc,
                attrs: {
                  rowSpan: row.rowSpan
                }
              }
            }
          },
          {
            title: '实验项目',
            dataIndex: 'projectName',
            customRender(_, row) {
              return {
                children: row.projectName,
                attrs: {
                  rowSpan: row.rowSpan
                }
              }
            }
          },
          {
            title: '实验教室',
            dataIndex: 'classroomName'
          },
          {
            title: '任课老师',
            dataIndex: 'teacherName'
          },
          {
            title: '开课日期',
            dataIndex: 'frequencyDay',
            scopedSlots: { customRender: 'frequencyDay' }
          },
          {
            title: '限选人数',
            dataIndex: 'maxStudents'
          }
        ],
        // 表头
        columns: [],
        loadData: '',
        tableLoading: false,
        cryData: '',
        record: ''
      }
    },
    created() {

    },
    mounted() {
      // this.getSchoolYearList()
      // this.getSchoolTermList()
    },
    watch: {
      $route: {
        handler(val) {
          if (val.name == 'course_selection_mgmt') {
            let params = this.$route.params
            this.record = params
            this.queryParam.schoolYearId = params.schoolYearId
            this.queryParam.schoolTermId = params.termId
            this.queryParam.coursePublishId = params.id
            // this.getCourseList()
            this.getCorusePublish()
          }
        },
        immediate: true
      }
    },
    methods: {
      /**
       * load学年列表
       */
      getSchoolYearList() {
        sysSchoolYearList().then((res) => {
          if (res.success) {
            this.schoolYearList = res.data
          }
        })
      },
      /**
       * load开课学期
       */
      getSchoolTermList() {
        sysSchoolTermList().then((res) => {
          if (res.success) {
            this.schoolTermList = res.data
          }
        })
      },
      /**
       * load课程
       */
      getCourseList() {
        coursePublishList({
          schoolYearId: this.queryParam.schoolYearId,
          termId: this.queryParam.schoolTermId
        }).then((res) => {
          if (res.success) {
            this.courseList = res.data
          }
        })
      },
      changeSchoolInfo() {
        this.getCourseList()
        this.queryParam.coursePublishId = ''
        this.loadData = []
        this.initColumns()
      },
      getCorusePublish() {
        coursePublishDetail({
          id: this.queryParam.coursePublishId
        }).then((res) => {
          if (res.success) {
            this.corusePublishData = res.data
          }
        })
        this.changeCourse(this.queryParam.coursePublishId)
      },
      initColumns() {
        let tempColumns = []
        this.cryColumns.map((item) => {
          tempColumns.push(item)
        })
        this.columns = tempColumns
      },
      changeCourse(value) {
        getCourseSelectionCryInfo({
          coursePublishId: value
        }).then((res) => {
          if (res.success) {
            this.initColumns()
            this.cryData = res.data
            this.appendColumns(res.data.coursePublishFrequencyList)
            this.loadData = res.data.courseScheduleVoList
          } else {
            this.$message.error('获取选课内容信息异常：' + res.message)
          }
        })
      },
      appendColumns(list) {
        list?.map((item) => {
          this.columns.push({
            title: '第' + item.frequencyIndex + '轮（' + item.weekStart + '-' + item.weekEnd + '周）',
            dataIndex: 'frequencyIndex-' + item.frequencyIndex,
            scopedSlots: { customRender: 'frequencyIndex-' + item.frequencyIndex }
          })
        })
      },
      showDetail() {
        this.$refs.detail.open(this.queryParam.coursePublishId)
      },
      handleDetailOk() {
        this.getCorusePublish()
      },
      exportCs() {
        this.$message.loading('文件生成中...')
        exportSelection({
          coursePublishId: this.queryParam.coursePublishId
        }).then((res) => {
          this.$refs.batchExport.downloadfile(res)
        }).finally(() => {
          this.$message.destroy()
        })
      },
      showStuList(courseScheduleId, frequencyIndex, frequencyDay) {
        if (this.queryParam.coursePublishId) {
          let param = {
            courseScheduleId: courseScheduleId,
            frequencyIndex: frequencyIndex,
            frequencyDay: frequencyDay,
            coursePublishId: this.queryParam.coursePublishId,
            schoolYearId: this.queryParam.schoolYearId,
            schoolTermId: this.queryParam.schoolTermId
          }
          this.$refs.sutList.open(param)
        } else {
          this.$message.error('请先选择开课课程')
        }
      },
      toConfirm() {
        coursePublishConfirm(this.queryParam.coursePublishId).then((res) => {
          if (res.success) {
            this.$message.success('选课确认成功')
            this.getCorusePublish()
          } else {
            this.$message.error('选课确认失败：' + res.message)
          }
        })
      },
      cancelConfirm() {
        coursePublishCancelConfirm(this.queryParam.coursePublishId).then((res) => {
          if (res.success) {
            this.$message.success('取消选课确认成功')
            this.getCorusePublish()
          } else {
            this.$message.error('取消选课确认失败：' + res.message)
          }
        })
      },
      helpStuCs() {
        let param = {
          coursePublishId: this.queryParam.coursePublishId,
          schoolYearId: this.queryParam.schoolYearId,
          schoolTermId: this.queryParam.schoolTermId
        }
        this.$refs.sutCpList.open(param)
      }

    }
  }
</script>
